
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<head>
<title>Login Panel</title>

<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css" type="text/css"
	media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css"
	media="screen" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style1.css" type="text/css" 
    media="screen"/>

<!-- jQuery - the core -->
<script src="js/jquery-1.6.js" type="text/javascript"></script>
<!-- Sliding effect -->
<script src="js/slide.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				$('#log').val(" ");
				$('#form').submit(
						function() {
							var username = $('#log').val();
							var pass = $('#pwd').val();

							if ((username == ' ' || username == '') && (pass == '' || pass == ' ')) {
								$('#error').html("Required Field is Empty");
								$('.grey').css("border-color", "red");
								return false;
							} else if (username == ' ' || username == '') {
								$('#error').html("Username cannot be Empty");
								$('#log').val(" ").css("border-color", "red");
								return false;
							} else if (pass == ' ' || pass == '') {
								$('#error').html("Password cannot be Empty");
								$('#pwd').val("").css("border-color", "red");
								return false;
							}
							/* if($('#log').regexp(/[0-9]/)){ return false; }; */
						})
				$('#log').keyup(function() {
					if (!this.value.match(/[\d]/)) {
						$('#error2').html("Employee ID should be Numeric");
						$(this).val("").css("border-color", "red");
						return false;
					}
				});
			})
</script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Cantarell.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('a,h3');
			Cufon.replace('h1', {
				textShadow: '0px 1px #fff'
			});
			Cufon.replace('h2', {
				textShadow: '0px 1px #fff'
			});
		</script>
		
<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			body{
				background:#FFF url(bg.gif) repeat top left;
				font-family:Arial, Helvetica, sans-serif;
				font-size:12px;
			}
			h1,h2{
				font-weight:normal;

			}
			h2{
				float:right;
				margin-top:35px;
				color:#999;
			}
			h1{
				color:#777;
				font-size:45px;
				float:left;
				margin:10px;
			}
			h3{
				color:#777;
				display:block;
				clear:both;
				font-weight:normal;
				font-size:16px;
				margin:10px;
				font-style:italic;
				text-align:center;
}
			.content{
				width:900px;
				position:relative;
				margin:20px auto 0px auto;
			}
			span.reference{
				font-family:Arial;
				text-align:center;
				font-size:12px;
				display:block;
				margin-top:20px;
			}
			span.reference a{
				color:#999;
				text-transform:uppercase;
				text-decoration:none;
				margin-right:20px;
			}
		</style>
</head>

<body>
	<!-- Panel -->
	<div id="toppanel">
		<div id="panel">
			<div class="content clearfix">
				<div class="left">
					<h1>Welcome to</h1>
					&nbsp
					<h1>PROJECT & EMPLOYEE TRACK SYSTEM</h1>



				</div>
				<div class="left">
					<!-- Login Form -->
					<form:form id="form" class="clearfix" action="home.html"
						commandName="login">
						<h1>Member Login</h1>
						<label class="grey" for="log">Username:</label>
						<form:input class="field" type="text" path="employeeId" id="log"
							size="23" />
						<br> <span id="error2" style="color : red"></span>
						<label class="grey" for="pwd">Password:</label>
						<form:input class="field" type="password" path="password" id="pwd"
							size="23" />
						<label><input name="rememberme" id="rememberme"
							type="checkbox" checked="checked" value="forever" />
							&nbsp;Remember me</label>
						<div class="clear"></div>
						<input type="submit" name="submit" value="Login" class="bt_login" />
						<a class="lost-pwd" href="#">Lost your password?</a>
					</form:form>
					<span id="error" style="color : red"></span>
				</div>

			</div>
		</div>
		<!-- /login -->

		<!-- The tab on top -->
		<div class="tab">
			<ul class="login">
				<li class="left">&nbsp;</li>
				<li>Hello Guest!</li>
				<li class="sep">|</li>
				<li id="toggle"><a id="open" class="open" href="#">Log In |
						Register</a> <a id="close" style="display: none;" class="close"
					href="#">Close Panel</a></li>
				<li class="right">&nbsp;</li>
			</ul>
		</div>
		<!-- / top -->

	</div>
	<!--panel -->

<div class="content">
			<h1>Apachebite</h1>
			<h2>PROJECT & EMPLOYEE TRACK SYSTEM</h2>
			
			<div id="hs_container" class="hs_container">
				<div class="hs_area hs_area1">
					<img class="hs_visible" src="images/area1/1.jpg" alt=""/>
					<img src="images/area1/2.jpg" alt=""/>
					<img src="images/area1/3.jpg" alt=""/>
				</div>
				<div class="hs_area hs_area2">
					<img class="hs_visible" src="images/area2/1.jpg" alt=""/>
					<img src="images/area2/2.jpg" alt=""/>
					<img src="images/area2/3.jpg" alt=""/>
				</div>
				<div class="hs_area hs_area3">
					<img class="hs_visible" src="images/area3/1.jpg" alt=""/>
					<img src="images/area3/2.jpg" alt=""/>
					<img src="images/area3/3.jpg" alt=""/>
				</div>
				<div class="hs_area hs_area4">
					<img class="hs_visible" src="images/area4/1.jpg" alt=""/>
					<img src="images/area4/2.jpg" alt=""/>
					<img src="images/area4/3.jpg" alt=""/>
				</div>
				<div class="hs_area hs_area5">
					<img class="hs_visible" src="images/area5/1.jpg" alt=""/>
					<img src="images/area5/2.jpg" alt=""/>
					<img src="images/area5/3.jpg" alt=""/>
				</div>
			</div>

			<div>
				<span class="reference">
					<a href="http://www.apachebite.com" target="_blank">back to apachebite</a>
				</span>
			</div>
		</div>
		
        <!-- The JavaScript -->
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
				//custom animations to use
				//in the transitions
				var animations		= ['right','left','top','bottom','rightFade','leftFade','topFade','bottomFade'];
				var total_anim		= animations.length;
				//just change this to one of your choice
				var easeType		= 'swing';
				//the speed of each transition
				var animSpeed		= 450;
				//caching
				var $hs_container	= $('#hs_container');
				var $hs_areas		= $hs_container.find('.hs_area');
				
				//first preload all images
                $hs_images          = $hs_container.find('img');
                var total_images    = $hs_images.length;
                var cnt             = 0;
                $hs_images.each(function(){
                    var $this = $(this);
                    $('<img/>').load(function(){
                        ++cnt;
                        if(cnt == total_images){
							$hs_areas.each(function(){
								var $area 		= $(this);
								//when the mouse enters the area we animate the current
								//image (random animation from array animations),
								//so that the next one gets visible.
								//"over" is a flag indicating if we can animate 
								//an area or not (we don't want 2 animations 
								//at the same time for each area)
								$area.data('over',true).bind('mouseenter',function(){
									if($area.data('over')){
										$area.data('over',false);
										//how many images in this area?
										var total		= $area.children().length;
										//visible image
										var $current 	= $area.find('img:visible');
										//index of visible image
										var idx_current = $current.index();
										//the next image that's going to be displayed.
										//either the next one, or the first one if the current is the last
										var $next		= (idx_current == total-1) ? $area.children(':first') : $current.next();
										//show next one (not yet visible)
										$next.show();
										//get a random animation
										var anim		= animations[Math.floor(Math.random()*total_anim)];
										switch(anim){
											//current slides out from the right
											case 'right':
												$current.animate({
													'left':$current.width()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the left
											case 'left':
												$current.animate({
													'left':-$current.width()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the top	
											case 'top':
												$current.animate({
													'top':-$current.height()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the bottom	
											case 'bottom':
												$current.animate({
													'top':$current.height()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the right	and fades out
											case 'rightFade':
												$current.animate({
													'left':$current.width()+'px',
													'opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the left and fades out	
											case 'leftFade':
												$current.animate({
													'left':-$current.width()+'px','opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the top and fades out	
											case 'topFade':
												$current.animate({
													'top':-$current.height()+'px',
													'opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
											//current slides out from the bottom and fades out	
											case 'bottomFade':
												$current.animate({
													'top':$current.height()+'px',
													'opacity':'0'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'top'		: '0px',
														'opacity'	: '1'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;		
											default:
												$current.animate({
													'left':-$current.width()+'px'
												},
												animSpeed,
												easeType,
												function(){
													$current.hide().css({
														'z-index'	: '1',
														'left'		: '0px'
													});
													$next.css('z-index','9999');
													$area.data('over',true);
												});
												break;
										}	
									}
								});
							});
							
							//when clicking the hs_container all areas get slided
							//(just for fun...you would probably want to enter the site
							//or something similar)
							$hs_container.bind('click',function(){
								$hs_areas.trigger('mouseenter');
							});
						}
					}).attr('src',$this.attr('src'));
				});			
				

            });
        </script>

</body>
</html>
